<template>
  <Image
    :fallback="code404"
    :height="'40px'"
    :preview="false"
    :src="imgData.src"
    :captchaId="imgData.captchaId"
    :width="'130px'"
    @click="getPicture"
  />
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { Image } from 'ant-design-vue';
import { getCaptchaApi } from '#/api';
import code404 from '#/assets/images/picture_code_404.png';

const imgData = reactive({
  src: '',
  captchaId: '',
});

function getPicture() {
  getCaptchaApi()
    .then((pictureData) => {
      imgData.src = pictureData.imageData;
      imgData.captchaId = pictureData.captchaId;

      sessionStorage.setItem('login_captchaId', pictureData.captchaId);
    })
    .catch((error) => {
      console.error('Error fetching captcha==:', error);
      sessionStorage.removeItem('login_captchaId');
    });
}

getPicture();
</script>
<style lang="scss" scoped></style>
